<template>
  <div>
    <quill-editor :disabled="sirIf" v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
    </quill-editor>
    <el-upload class="avatar-uploader quill-uploader" :action="'http://124.70.196.178:8080/intelligent_control_webservice_eeds/pc/upload/uploadFile/'" :headers="headers" name="file" :show-file-list="false" :on-success="uploadBannerSuccess" :before-upload="beforeUploadBanner">
    </el-upload>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    sirProps: {
      type: String,
      default: ''
    },
    sirIf: {
      type: [String, Boolean],
      default: false
    }
  },
  // 监听器
  watch: {
    sirProps(val) {
      this.content = val
    }
  },
  data() {
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
      ['blockquote', 'code-block'], //引用，代码块
      [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
      [{ list: 'ordered' }, { list: 'bullet' }], //列表
      [{ script: 'sub' }, { script: 'super' }], // 上下标
      [{ indent: '-1' }, { indent: '+1' }], // 缩进
      [{ direction: 'rtl' }], // 文本方向
      [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
      [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
      [{ font: [] }], //字体
      [{ align: [] }], //对齐方式
      ['clean'], //清除字体样式
      // ['image','video'] //上传图片、上传视频
      ['image'] //上传图片、上传视频
    ]
    const sirIfCon = this.sirIf
    return {
      content: this.sirProps, // 内容
      adw: 'adwa',
      editorOption: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  if (!sirIfCon) {
                    document.querySelector('.quill-uploader.avatar-uploader input').click()
                  }
                } else {
                  console.log('失败')
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      } // 富文本工具栏
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    },
    headers() {
      return {
        Authorization: window.localStorage.getItem('token')
      }
    }
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
      console.log('准备编辑器', editor)
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {
      this.$emit('returnData', this.content)
    }, // 内容改变事件
    // 上传成功
    uploadBannerSuccess(res) {
      console.log('aaaa', res.data)
      // 获取富文本组件实例
      const quill = this.$refs.myQuillEditor.quill
      if (res.data) {
        // 获取光标所在位置
        const length = quill.getSelection().index
        console.log('length', length)
        // 插入图片 res.fileId为服务器返回的图片地址
        // const imageDome= `<img :src="${res.fileId} | getImg" class="avatar">`
        // quill.insertEmbed(length, divDome)
        quill.insertEmbed(length, 'image', res.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
      }
    },
    // 上传前
    beforeUploadBanner(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

